<template>
  <div class="person">
    <!-- <h2>{{ a }}</h2> -->
    <h2>{{ list }}</h2>
    <ul>
      <li v-for="item in list" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script lang="ts" setup>
import { type PersonInter, type Persons } from '@/types'
import { defineProps } from 'vue';

// 接收a
// defineProps(['a'])

// // 接收a,list,同时将props保存起来
// let x = defineProps(['a', 'list'])

/* console.log(x)
console.log(x)
console.log(x.list)
for (let i = 0; i < x.list.length; i++) {
  console.log(x.list[i])
} */

// 接收list+限制类型
// defineProps<{ list: Persons }>()

// 接收list+限制类型+限制必要性+指定默认值
withDefaults(defineProps<{ list?: Persons }>(), {
  list: () => [{ id: '123123', name: '康师傅', age: 20 }]
})


/* for (let c: x.list) {
  console.log(list)
} */


/* let person: PersonInter = {
  id: '123',
  name: '张三',
  age: 80,
} */

let personList: Persons = [{
  id: '123',
  name: '张三',
  age: 80,
}, {
  id: '124',
  name: '李四',
  age: 80,
}, {
  id: '125',
  name: '王五',
  age: 80,
}]
</script>

<style scoped>
.person {
  background-color: #444fb4;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}

li {
  font-size: 20px;
}

button {
  margin: 0 10px auto;
}
</style>
